<template>
  <div style="font-size: 23px;margin-top: 21%;"> 
      <div class="wavy">
        <template v-for="(item,index) in text" :key="index">
          <span :style="getIndex(index)">{{ item }}</span>
        </template>
</div>
  </div>
</template>
<script>
export default {
  name: "Dashboard",
  computed: {},
  data() {
    return {
      text: '欢迎使用'+this.globalObject.systemName+'...'
    };
  },
  methods: {
    // 获取下标索引值, delaySecond为自定义属性, 用于动画的延迟
    getIndex(index){
      return {
        '--delaySecond':index+1
      }
    },
   
  },
};
</script>
<style scoped>
.wavy{
    position: relative;
    /* 倒影 */
    -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));
}
.wavy span{
    position: relative;
    display: inline-block;
    font-size: 26px;
    /* 无限循环跳动 */
    /* animation: animate 1s ease-in-out infinite; */
    animation: animate 1s ease-in-out ;
    /* 动画循环3次 */
    animation-iteration-count: 3;
    animation-delay: calc(.1s * var(--delaySecond));
}
@keyframes animate{
    0%{
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-24px);
    }
    40%,100%{
        transform: translateY(0px);
    }
}
</style>
